<%@ page language="java" pageEncoding="utf-8" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <base href="<%=basePath%>">

    <title>${sessionScope.topicName} - 站点分布统计</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <%@include file="../im.jsp" %>
    <link rel="stylesheet" href="css/pagination.css"/>
    <link rel="stylesheet" href="css/subPage.css"/>
    <script type="text/javascript" src="js/jquery.min.js"/>
    <script type="text/javascript" src="js/jquery.pagination.js"></script>

    <link href="js/jquery-ui-1.8.13/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-ui-1.8.13/ui/jquery-ui.js"></script>

    <!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css"/>
    <script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>

    <script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" src="js/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
</head>

<body>
<logic:equal name="user" value="administrator">
<div id="content" class="container">
        <%@include file="../top.jsp" %>
    <div class="row">
        <%@include file="../left.jsp" %>

        <input type="hidden" name="count" value="200"/>

        <div class="right">

            <div id="right_left">
                <div style="margin: 10px;margin-left: 0px;padding-bottom: 5px;">
                    <script type="text/javascript">

                    </script>
                </div>
                <div>
                    起始日期：<input id="startDate" name="sd"/>
                    结束日期：<input id="endDate" name="sd"/>
                    <input type="button" name="datenewsbt" value="确定"/>
                </div>
                <script type="text/javascript">

                    startDate = "${startDate}";
                    endDate = "${endDate}";
                    if (startDate != null && startDate != "null") {
                        $("#startDate").val(startDate);
                    }
                    if (endDate != null && endDate != "null") {
                        $("#endDate").val(endDate);
                    }

                    $("#startDate").datepicker({
                        dateFormat: "yy-mm-dd",	//格式
                        changeYear: true,	//可以改变年份
                        firstDay: 1,	//周始日
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        changeMonth: true	//可以改变月份
                    });
                    $("#endDate").datepicker({
                        dateFormat: 'yy-mm-dd',//格式
                        changeYear: true,	//可以改变年份
                        firstDay: 1,	//周始日
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        changeMonth: true	//可以改变月份
                    });
                    $("input[name=datenewsbt]").click(function () {
                        var type = $("input[name=type]:checked").val();
                        var sd = $("#startDate").val();
                        var ed = $("#endDate").val();

                        if (sd > ed && !(sd == '' || ed == '')) {
                            alert("时间选择有误，请重新选择");
                        } else {
                            window.location.href = "reportAction.do?method=sitedist&sd=" + sd + "&ed=" + ed + "&type=" + type;
                        }
                    });
                </script>
                <div>
                    <input type="radio" name="type" value="news"/>新闻&nbsp;
                    <input type="radio" name="type" value="bbs"/>论坛&nbsp;
                    <input type="radio" name="type" value="weibo"/>微博&nbsp;
                    <input type="radio" name="type" value="blog"/>博客&nbsp;
                    <script type="text/javascript">
                        $("input[name=type][value=${type}]").attr("checked", true);
                    </script>
                </div>
                <div class="titlebox" style="border-bottom: 1px solid darkgray; padding:0 3px;">
                    <div class="title"></div>
                </div>
                <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

                    <!--TODO 这里显示图表-->
                </div>
                <script type="text/javascript">
                    data = <%=request.getAttribute("data")%>;

                    //                data=eval("'"+data+"'");
                    //                data = jQuery.parseJSON(data);
                    if (data == '') {
                        var sp = $("#container").append("span");
                        sp.css("text-align", "center");
                        sp.css("height", "400px");
                        sp.html("没有数据");
                    } else {
                        var plot3 = $.jqplot('container', data, {
                            title: '站点分布',
                            series: [
                                {renderer: $.jqplot.BarRenderer}
                            ],
                            axesDefaults: {
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                tickOptions: {
                                    angle: -45
                                }
                            }, seriesDefaults: {
                                showMarker: false,
                                pointLabels: { show: true }
                            },
                            axes: {
                                xaxis: {
                                    renderer: $.jqplot.CategoryAxisRenderer,
                                    tickOptions: {
                                        labelPosition: 'middle'
                                    }
                                },
                                yaxis: {
                                    autoscale: true,
                                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                    tickOptions: {
                                        labelPosition: 'start'
                                    }
                                }
                            }
                        });
                    }

                </script>
            </div>
            <!--end of right-->
        </div>
    </div>
    <div class="footer">
        <%@ include file="../foot.jsp" %>
    </div>
    </logic:equal>
    <logic:empty name="user">
    Access Rejected! Error 404
    </logic:empty>
</body>
</html>
